import { getLocale } from 'locales';
import { useRecoilState } from 'recoil';

import Box from '@mui/material/Box';
import { SelectChangeEvent } from '@mui/material/Select';

import SelectInput, {
  SelectItem
} from 'components/organisms/inputs/selectInput';

import { datasetFiltersState } from 'state/dataset';
import { localeState } from 'state/project';

export default function FeedbackSelect() {
  const [df, setDf] = useRecoilState(datasetFiltersState);
  const [locale] = useRecoilState(localeState);

  const items: SelectItem[] = [
    {
      value: 0,
      label: getLocale('All', locale)
    },
    {
      value: 1,
      label: getLocale('Good', locale)
    },
    {
      value: -1,
      label: getLocale('Bad', locale)
    }
  ];

  const handleChange = (event: SelectChangeEvent) => {
    setDf({ ...df, feedback: parseInt(event.target.value) });
  };

  return (
    <Box sx={{ width: 120 }}>
      <SelectInput
        items={items}
        id="feedback-filter-select"
        value={df.feedback || 0}
        label={getLocale('Feedback', locale)}
        onChange={handleChange}
      />
    </Box>
  );
}
